<template>
  <div>
    <cus-modal ref="modal" title="扫码配送入库" width="500" @onOk="onOk">
      <div>
        <p>
          第 {{ index == 0 ? 1 : index + 1 }} 张二维码，已存在
          {{ data.length }} 张（空的不算）
        </p>
        <div class="mt_10">
          <Input
            v-model="value"
            type="textarea"
            autocomplete
            :autosize="{ minRows: 15 }"
            :rows="10"
            placeholder="请先点击输入框，再进行二维码扫描！数据量大时，等待时间会相对较长。"
          />
        </div>
      </div>
      <div slot="footer">
        <slot name="footer">
          <div
            class="modal-footer"
            style="display: flex; justify-content: center"
          >
            <cus-button size="small" class="mr_10" @onClick="onCancel"
              >取消</cus-button
            >
            <cus-button
              type="primary"
              size="small"
              class="mr_10"
              @onClick="onReset"
              >重置</cus-button
            >
            <cus-button
              size="small"
              class="mr_10"
              @onClick="onDelete"
              :disabled="data.length < 1"
              >删除</cus-button
            >
            <cus-button
              type="primary"
              size="small"
              class="mr_10"
              @onClick="Previous"
              :disabled="index < 1"
              >上一张</cus-button
            >
            <cus-button
              type="primary"
              size="small"
              class="mr_10"
              @onClick="next"
              >下一张</cus-button
            >
            <cus-button
              type="primary"
              size="small"
              class="mr_10"
              @onClick="onOk"
              >提交</cus-button
            >
          </div>
        </slot>
      </div>
    </cus-modal>
    <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>

<script>
import {
  postApiGoodsAnalysisDeliveryBillQRCodeVerify,
  postApiGoodsAnalysisDeliveryBillQRCode,
} from "@/api/business/manager";
export default {
  data() {
    return {
      loading: false,
      value: "",           // 当期存放数据
      data: [],          // 总计提交数据
      index: 0,         // 目前处在第几张
      //modal: false,  // 提交后弹框
    };
  },
  mounted() {},
  methods: {
    show() {
      this.$refs["modal"].show = true;
    },
    //取消
    onCancel() {
      this.$refs["modal"].show = false;
      this.data.splice(0, this.data.length);
      this.value = "";
      this.index = 0;
    },
    //重置
    onReset() {
      this.value = "";
      this.index = 0;
      this.data.splice(0, this.data.length);
    },
    //删除
    onDelete() {
      if (this.index + 1 > this.data.length) {
        --this.index;
        this.value = this.data[this.index];
        return;
      }
      this.data.splice(this.index, 1);
      this.value = this.data[this.data.length > this.index + 1 ? this.index : this.data.length - 1]
    },
    //上一张
    Previous() {
      if (this.value || this.data.length > this.index + 1) this.data.splice(this.index, 1, this.value);
      if (!this.data[this.data.length - 1]) this.data.splice(this.data.length - 1, 1);
      --this.index;
      this.value = this.data[this.index];
    },
    //下一张
    next() {
      // 可以为空,但是最后一项不能为空
      this.data.splice(this.index, 1, this.value ? this.value : '');
      if (this.data[this.data.length - 1] || this.value) {
        this.value = '';
        if (this.data.length  === this.index) {
          ++this.index;
        } else if (this.data.length > this.index){
           ++this.index;
            this.value = this.data[this.index];
        } else {
          this.value = this.data[this.index];
        }
      } else {
        this.$Message.error('数据为空不能下一步')
      }
    },
    //确认
    onOk() {
      this.data.splice(this.index, 1, this.value);
      if (this.data.length > 0) {
        this.postApiGoodsAnalysisDeliveryBillQRCodeVerifyApi("save");
      } else {
        this.$Message.error("数据不能为空");
      }
    },
    //上传信息二维码前效验----------------------------接口
    postApiGoodsAnalysisDeliveryBillQRCodeVerifyApi(v) {
      this.$cu.showLoading();
      let flag = false;
      new Promise((resolve) => {
        let params = {
          qrcodeList: this.data,
        };
        console.log(params);
        postApiGoodsAnalysisDeliveryBillQRCodeVerify(params).then((res) => {
            this.$cu.hideLoading(1);
          if (res.retCode == 2000) {
            if (v == "save") {
              this.postApiGoodsAnalysisDeliveryBillQRCodeApi(v);
            }
            console.log("succes");
            this.value = "";
            ++this.index;
            resolve();
            flag = true;
          } else {
            this.data.splice(this.index, 1);
          }
        });
      });
      return flag;
    },
    //上传信息二维码保存----------------------------接口
    postApiGoodsAnalysisDeliveryBillQRCodeApi(v) {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          qrcodeList: this.data,
        };
        postApiGoodsAnalysisDeliveryBillQRCode(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.datas = res.data;
            this.$Message.success(res.retMsg);
            if (v == "save") {
              this.$refs["modal"].show = false;
            }
            this.$parent.onInit();
            this.onCancel();
            this.$cu.hideLoading();
            resolve();
            this.flag = true;
          } else {
            this.$cu.hideLoading(1);
            this.loading = false;
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>
